<!---
二次封装的分页数据
数参参考：https://element-plus.org/zh-CN/component/pagination.
$props传递子父组件共有的prop
$attrs简单来说， attrs 主要接收没在 props 里定义，但父组件又传过来的属性,
注：事件方法也绑在$attrs里
-->
<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :small="small"
      :background="background"
      :pageSizes="pageSizes"
      :disabled="disabled"
      :layout="layout"
      @size-change="handleSizeChange"
      @current-change="handleCurrentchange"
    />
  </div>
</template>
<script lang="ts" setup>
//父--子(当前)--孙组件(el-pagination)
/**
 * 所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。
 * 这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
 * 另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。
 */
import { toRefs } from 'vue'

const emits = defineEmits(['size-change', 'current-change'])
const Props = defineProps({
  //每页显示多少条
  pageSize: {
    type: Number,
    default: 100
  },
  //总条数
  total: {
    type: Number,
    default: 10000
  },
  //当前页面
  currentPage: {
    type: Number,
    default: 1
  },
  //是否使用小型分页样式
  small: {
    type: Boolean,
    default: false
  },
  //是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  pageSizes: {
    type: Array,
    default: () => {
      return [100, 200, 300, 400]
    }
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})

let { pageSize, currentPage, total, small, background, pageSizes, layout, disabled } = toRefs(Props)

const handleSizeChange = (value: number) => {
  emits('size-change', value)
}
const handleCurrentchange = (value: number) => {
  emits('current-change', value)
}
</script>

<style lang="scss" scoped>
.pagination {
  text-align: center;
  padding: 20px 0;
  height: 20px;
  .el-pagination {
    float: right;
  }
}
</style>
